<template>
  <div
    class="vaw-avatar-container">
    <el-dropdown
      trigger="hover"
      @command="onCommad">
      <div
        class="action-wrapper">
        <div class="avatar">
          <img
            :src="avatar" />
        </div>
        <span
          class="nick-name el-dropdown-link">
          <span>{{ nickName || "admin" }}</span>
          <i
            class="el-icon-arrow-down tip"></i>
        </span>
      </div>
      <el-dropdown-menu
        slot="dropdown">
        <el-dropdown-item
          icon="el-icon-lollipop"
          command="theme">
          设置主题
        </el-dropdown-item>
        <el-dropdown-item
          icon="el-icon-user"
          command="personalCenter">
          修改密码
        </el-dropdown-item>
        <el-dropdown-item
          icon="el-icon-switch-button"
          command="logout">
          退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <SettingInfo
      ref="setting" />
    <el-dialog title="修改密码"
      :visible.sync="dialogVisible"
      width="30%"
      append-to-body
      :before-close="handleClose">
      <el-form ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm">
        <!-- <el-form-item
          label="旧密码"
          prop="oldpwd">

          <el-input
            :type="type"
            placeholder="请输入密码"
            v-model="ruleForm.oldpwd">
            <i slot="suffix"
              @click="type == 'password'? type ='text':type ='password'"
              class="el-input__icon el-icon-view"></i>
          </el-input>
        </el-form-item> -->
        <el-form-item
          label="新密码"
          prop="password">
          <el-input
            v-model="ruleForm.password"
            :type="type1"
            placeholder="请输入密码">
            <i slot="suffix"
              class="el-input__icon el-icon-view"
              @click="type1 == 'password'? type1 ='text':type1 ='password'"></i>
          </el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="passwords">
          <el-input
            v-model="ruleForm.passwords"
            :type="type2"
            placeholder="请输入密码">
            <i slot="suffix"
              class="el-input__icon el-icon-view"
              @click="type2 == 'password'? type2 ='text':type2 ='password'"></i>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button
          @click="dialogVisible = false">取
          消</el-button>
        <el-button
          type="primary"
          @click="handlePwd">确
          定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import store from '../store/index'
import { MessageBox } from 'element-ui'
import SettingInfo from '../setting/components/SettingInfo.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'VAWAvatar',
  components: { SettingInfo },

  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.ruleForm.password !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    const equalToPasswordOld = (rule, value, callback) => {
      if (window.localStorage.getItem('password') !== value) {
        callback(new Error('原密码错误'))
      } else {
        callback()
      }
    }
    return {
      state: store.state,
      dialogVisible: false,
      type: 'password',
      type1: 'password',
      type2: 'password',
      ruleForm: {
        oldpwd: '',
        password: '',
        passwords: ''
      },
      rules: {
        oldpwd: [
          { required: true, message: '请输入旧密码!', trigger: 'blur' },
          { required: true, validator: equalToPasswordOld, trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入新密码!', trigger: 'blur' }],
        passwords: [
          { required: true, message: '请输入确认密码!', trigger: 'blur' },
          { required: true, validator: equalToPassword, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters({
      avatar: 'user/getAvatar',
      nickName: 'user/getNickName'
    })
  },
  methods: {
    onCommad(command) {
      switch (command) {
        case 'theme':
          this.$refs.setting.show()
          break
        case 'personalCenter':
          this.dialogVisible = true
          break
        case 'logout':
          this.onLogout()
          break
      }
    },
    onPersonalCenter() {
      store.toPersonalCenter && store.toPersonalCenter()
    },
    handleClose() {
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        oldpwd: '',
        password: '',
        passwords: ''
      }
      this.dialogVisible = false
    },
    handlePwd() {
      const userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$https('USEREDIT', {
            id: userInfo.userId,
            password: this.ruleForm.password
          }).then(res => {
            if (res.status == 200) {
              this.$message.success('修改成功')
              setTimeout(() => {
                window.localStorage.clear()
                window.location.reload()
              }, 2000)
            }
          })
        }
      })
    },
    onLogout() {
      MessageBox.confirm('是否要退出登录？', '提示')
        .then(_ => {
          store.logout()
          window.localStorage.clear()
          store.onLogout && store.onLogout()
          // window.location.href = '/login?redirect=22'
        })
        .catch(_ => {})
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/styles/variables.scss';
.vaw-avatar-container {
  .action-wrapper {
    display: flex;
    align-items: center;
    .avatar {
      width: calc(#{$logoHeight} - 15px);
      height: calc(#{$logoHeight} - 15px);
      display: flex;
      align-items: center;
      & > img {
        border: 1px solid #f6f6f6;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .nick-name {
      margin-left: 10px;
      .tip {
        transform: rotate(0);
        transition: transform $transitionTime;
      }
    }
  }
}
.vaw-avatar-container:hover {
  cursor: pointer;
  .nick-name .tip {
    transform: rotate(180deg);
    transition: transform $transitionTime;
  }
}
.el-dropdown-menu {
  top: 40px !important;
}
</style>
